<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/jquery-json-form-binding.min.js"></script>
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/ejs.min.js"></script>
</head>
<body>
<form id="myform">
  <div class="form-field">
    <h5> Text Input </h5>
    <input type="text" name="name">
  </div>
  <div class="form-field">
    <h5> Single Select </h5>
    <select name="country">
      <option value="usa">USA</option>
      <option value="uk">UK</option>
      <option value="germany">Germany</option>
    </select>
  </div>
  <div class="form-field">
    <h5> Multiple Select </h5>
    <select multiple name="skill[]">
      <option value="html">html</option>
      <option value="css">css</option>
      <option value="javascript">javascript</option>
      <option value="node">node</option>
    </select>
  </div>
  <div class="form-field">
    <h5> checkbox example </h5>
    <label>
      <input type="checkbox" value="english" name="language[]" />
      English</label>
    <label>
      <input type="checkbox" value="french" name="language[]" />
      French</label>
    <label>
      <input type="checkbox" value="german" name="language[]" />
      German</label>
  </div>
  <div class="form-field">
    <h5> Radio example </h5>
    <label>
      <input type="radio" value="male" name="sex" />
      Male</label>
    <label>
      <input type="radio" value="female" name="sex" />
      Female</label>
  </div>
  
  <input type="button" value="获取" id="get_json">
</form>

<div id="output"></div>

<script type="text/html" id="tpl">
<%= people.join(", "); %>
<ul>
<% for(var i=0;i<people.length;i++){ %>
<li><%=people[i]%></li>
<% } %>
</ul>
</script>

<script>
$(document).ready(function(e) {
	axios.get('data.json', {
		params: {
		  ID: 12345
		}
	}).then(function (response) {
		console.log(response);
		$("#myform").jsonToForm(response.data);
	}).catch(function (error) {
		console.log(error);
	});
	
	$('#get_json').click(function(){
		console.log($("#myform").serializeJSON());	
	});

	
});
</script>

<script>
  var people = ['geddy', 'neil', 'alex'];
  var html = ejs.render($('#tpl').html(), {people: people});
  $('#output').html(html);
</script>
</body>
</html>
